<template>
  <div class="Real-time_content">
    <div class="Real-time_top">
      <el-select
        v-model="formInline.recipe"
        style="width: 120px; height: 40px"
        placeholder="机种选项"
        @change="oncheng"
      >
        <el-option
          v-for="item in RecipeList"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>

      <el-select
        v-model="formInline.line"
        style="width: 120px; height: 40px"
        placeholder="线体选项"
        @change="oncheng"
      >
        <el-option
          v-for="item in lineList"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>

      <el-select
        v-model="formInline.errorcode"
        style="width: 120px; height: 40px"
        placeholder="缺陷选项"
        @change="oncheng"
      >
        <el-option
          v-for="item in this.defectlist"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>

      <el-select
        v-model="formInline.dayFlag"
        style="width: 120px; height: 40px"
        placeholder="当日班次选项"
        @change="oncheng"
      >
        <el-option label="当日" value="1"></el-option>
        <el-option label="当日班次" value="2"></el-option>
      </el-select>
      <div class="time_title">{{ titleL }} 实时看板</div>
    </div>

    <div class="real_time_hader">
        <div id="my_newest"></div>
        <div id="my_newest_2"></div>
        <div id="my_newest_3"></div>
        <div id="my_newest_4"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleL: "",
      lineList: [],
      RecipeList: [],
      defectlist: [],
      formInline: {
        errorcode: "",
        line: "",
        recipe: "",
        dayFlag: "",
      },

      data: [],
      value: Math.random() * 1000,
      now: +new Date(1997, 9, 3),
      oneDay: 24 * 3600 * 1000,
      OutPuttime: null,
      Activationtime: null,
      Efficienttime: null,
      NGNumtime: null,
      OutPut: [],
      Activation: [],
      Efficient: [],
      NGNum: [],

      OutPut_2: [],
      Activation_2: [],
      Efficient_2: [],
      NGNum_2: [],

      list: [],
      timr: [],
    };
  },
  mounted() {
    this.getrecipelist();
  },
  methods: {
    randomData(now, value) {
      now = new Date(+this.now + this.oneDay);

      value = this.value + Math.random() * 21 - 10;

      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          Math.round(value),
        ],
      };
    },
    oncheng() {
      this.titleL = this.formInline.line;
      if (this.formInline.recipe == "") {
        this.$alert("机种不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.line == "") {
        this.titleL = this.formInline.line;
        this.$alert("线体不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.errorcode == "") {
        this.$alert("缺陷不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.dayFlag == "") {
        this.$alert("当日或当日班次不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        this.getrealTimeline();
        setTimeout(() => {
          this.my_newest();
          this.my_newest_2();
          this.my_newest_3();
          this.my_newest_4();
        }, 2000);
        var char_1 = this.$echarts.init(document.getElementById("my_newest"));
        var char_2 = this.$echarts.init(document.getElementById("my_newest_2"));
        var char_3 = this.$echarts.init(document.getElementById("my_newest_3"));
        var char_4 = this.$echarts.init(document.getElementById("my_newest_4"));
        char_1.dispose();
        char_2.dispose();
        char_3.dispose();
        char_4.dispose();
      }
    },

    //实时折线图1
    my_newest() {
      let my_newest = this.$echarts.init(document.getElementById("my_newest"));
      let list = [];
      let timr = [];
      // console.log("--------------第一次产能获取到数据", this.OutPut);
      for (let i = 0; i < this.OutPut.length; i++) {
        timr.push(this.OutPut[i].day);
        list.push(this.OutPut[i].val);
      }
      var option = {
        title: {
          text: "产能实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["1", "2", "3"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timr,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: "",
            type: "line",
            // stack: "总量",
            data: list,
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
        ],
      };

      my_newest.setOption(option, true);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
      this.OutPuttime = setInterval(() => {
        // console.log("=============前", this.OutPut_2);
        list = [];
        timr = [];
        this.setintovgetlist();
        setTimeout(() => {
          for (let i = 0; i < this.OutPut_2.length; i++) {
            list.push(this.OutPut_2[i].val);
            timr.push(this.OutPut_2[i].day);
          }
          // console.log("=============产能第二次回去数据",list);
          my_newest.setOption({
            series: [
              {
                name: "",
                data: list,
              },
            ],
          });
        }, 1200);
        my_newest.setOption(option, true);
        window.addEventListener("resize", function () {
          my_newest.resize();
        });
      }, 120000);
    },

    //实时折线图2
    my_newest_2() {
      let my_newest_2 = this.$echarts.init(
        document.getElementById("my_newest_2")
      );
      let timr = [];
      let list = [];
      for (let i = 0; i < this.Activation.length; i++) {
        timr.push(this.Activation[i].day);
        list.push(this.Activation[i].val);
      }
      var option = {
        title: {
          text: "稼动率实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timr,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: "",
            type: "line",
            // stack: "总量",
            data: list,
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            label: {
              show: true,
            },
            itemStyle: {
              color: "#FFA500",
            },
          },
        ],
      };
      my_newest_2.setOption(option, true);
      window.addEventListener("resize", function () {
        my_newest_2.resize();
      });
      this.Activationtime = setInterval(() => {
        timr = [];
        list = [];
        setTimeout(() => {
          // console.log("------------稼动第二次率获取数据", this.Activation_2);
          for (let i = 0; i < this.Activation_2.length; i++) {
            timr.push(this.Activation_2[i].day);
            list.push(this.Activation_2[i].val);
          }
          // console.log("=========稼动第二次率获取数据------====后", list);
          my_newest_2.setOption({
            series: [
              {
                name: "",
                data: list,
              },
            ],
          });
        }, 1200);
        my_newest_2.setOption(option, true);
      }, 120000);
    },
    //实时折线图3
    my_newest_3() {
      let my_newest_3 = this.$echarts.init(
        document.getElementById("my_newest_3")
      );
      // console.log("------------效率第一次数据", this.Efficient);
      let timr = [];
      let list = [];
      for (let i = 0; i < this.Efficient.length; i++) {
        timr.push(this.Efficient[i].day);
        list.push(this.Efficient[i].val);
      }

      var option = {
        title: {
          text: "效率实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timr,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: "",
            type: "line",
            // stack: "总量",
            data: list,
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            label: {
              show: true,
            },
            itemStyle: {
              color: "#FFA500",
            },
          },
        ],
      };
      my_newest_3.setOption(option, true);
      window.addEventListener("resize", function () {
        my_newest_3.resize();
      });
      this.Efficienttime = setInterval(() => {
        timr = [];
        list = [];
        setTimeout(() => {
          for (let i = 0; i < this.Efficient_2.length; i++) {
            timr.push(this.Efficient_2[i].day);
            list.push(this.Efficient_2[i].val);
          }
          // console.log("-----------------效率第二次获取数据", list);
          my_newest_3.setOption({
            series: [
              {
                name: "",
                data: list,
              },
            ],
          });
        }, 1200);
        my_newest_3.setOption(option, true);
      }, 120000);
    },
    //实时折线图4
    my_newest_4() {
      let my_newest_4 = this.$echarts.init(
        document.getElementById("my_newest_4")
      );

      // console.log("------------不良数第一次获取数据", this.NGNum);
      let timr = [];
      let list = [];
      for (let i = 0; i < this.NGNum.length; i++) {
        timr.push(this.NGNum[i].day);
        list.push(this.NGNum[i].val);
      }
      var option = {
        title: {
          text: "不良数量实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["1", "2", "3"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timr,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: "",
            type: "line",
            // stack: "总量",
            data: list,
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            label: {
              show: true,
            },
            itemStyle: {
              color: "#FFA500",
            },
          },
        ],
      };
      my_newest_4.setOption(option, true);
       window.addEventListener("resize", function () {
        my_newest_4.resize();
      });
      this.NGNumtime = setInterval(() => {
        timr = [];
        list = [];
        setTimeout(() => {
          for (let i = 0; i < this.Efficient_2.length; i++) {
            timr.push(this.NGNum_2[i].day);
            list.push(this.NGNum_2[i].val);
          }
          // console.log("-----------------不良数第二次获取数据", list);
          my_newest_4.setOption({
            series: [
              {
                name: "",
                data: list,
              },
            ],
          });
        }, 1200);
        my_newest_4.setOption(option, true);
      }, 120000);
    },

    //获取 机种 线体
    getrecipelist() {
      let a = {};
      this.ajax({
        url: "airplane",
        method: "GET",
        params: {
          data: a,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // console.log(res.data);
          this.lineList = res.data.data.line;
          this.RecipeList = res.data.data.recipe;
          this.defectlist = res.data.data.defect;
          if (this.RecipeList) {
            this.$message({
              message: "请选择机种，线体",
              type: "success",
            });
            // this.nowEcharts()
          } else {
            this.$message({
              message: "数据未能返回，请刷新浏览器",
              type: "warning",
            });
          }
        }
      });
    },

    //获取 折线图数据
    getrealTimeline() {
      this.ajax({
        url: "Real-time-lineList",
        method: "GET",
        params: {
          data: this.formInline,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // console.log("------------------------", res.data.data);
          (this.OutPut = res.data.data.OutPut),
            (this.Activation = res.data.data.Activation),
            (this.Efficient = res.data.data.Efficient),
            (this.NGNum = res.data.data.NGNum);
        }
      });
    },

    //定时器内获取数据
    setintovgetlist() {
      this.ajax({
        url: "Real-time-lineList",
        method: "GET",
        params: {
          data: this.formInline,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.OutPut_2 = res.data.data.OutPut;
          (this.Activation_2 = res.data.data.Activation),
            (this.Efficient_2 = res.data.data.Efficient),
            (this.NGNum_2 = res.data.data.NGNum);
        }
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.OutPuttime);
    clearInterval(this.Activationtime);
    clearInterval(this.Efficienttime);
    clearInterval(this.NGNumtime);
  },
};
</script>

<style  scoped>
.Real-time_content {
  width: 100%;
}
.Real-time_top {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 10px;
}
.time_title {
  width: 20%;
  margin-top: 7px;
  margin-left: 220px;
}
.real_time_hader {
  width: 95%;
  margin: 10px auto;
  display: flex;
  flex-flow: wrap;
  /* border: 1px solid #000; */
  justify-content: space-between;
}
#my_newest {
  width: 49.5%;
  height: 400px;
  /* background: #ecebeb; */

  margin-top: 5px;
}
#my_newest_2 {
  width: 49.5%;
  height: 400px;
  /* background: #ecebeb; */

  margin-top: 5px;
}
#my_newest_3 {
  width: 49.5%;
  height: 400px;
  /* background: #ecebeb; */

  margin-top: 5px;
}
#my_newest_4 {
  width: 49.5%;
  height: 400px;
  /* background: #ecebeb; */
  margin-top: 5px;
}
</style>